<template>
  <view>
    <!-- 登录组件 -->
    <view class="login-container">
        <!-- 提示登录的图标开始 -->
        <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
        <!-- 提示登录的图标结束 -->
        
        <!-- 登录按钮开始 -->
        <!--open-type="getUserInfo" 属性，表示点击按钮时，希望获取用户的基本信息; 可以从 @getuserinfo 事件处理函数的形参中，获取到用户的基本信息 -->
        <!-- <button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button> -->
        <button type="primary" class="btn-login" @click="dianji">一键登录</button>
        <!-- 登录按钮结束 -->
        
        <!-- 登录提示开始 -->
        <view class="tips-text">登录后尽享更多权益</view>
        <!-- 登录提示结束 -->
      </view>
  </view>
</template>

<script>
  // 按需导入 mapMutations 辅助函数
import { mapMutations, mapState } from 'vuex'
  export default {
    name:"my-login",
    data() {
      return {
        
      };
    },
    computed:{
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('m_user', ['redirectInfo']),
    },
    methods:{
      // 调用 mapMutations 辅助方法，把 m_user 模块中的 更新用户的基本信息方法updateUserInfo 映射到当前组件中使用
      // 使用 mapMutations 辅助方法，把 m_user 模块中的更新 token 字符串方法 updateToken 方法映射到当前组件中使用
      // 使用 mapMutations 辅助方法，把 m_user 模块中的更新重定向的信息对象方法 updateRedirectInfo 方法映射到当前组件中使用(跳转回原来的页面清空vuex中redirectInfo数据)
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken','updateRedirectInfo']),
      // code用户登录凭证wx.login()获取
      // encryptedData完整用户信息密文getUserInfo(e)获取
      // iv加密算法的初始向量getUserInfo(e)获取  iv: "Vw15pedXClAMtm4a/fN2Ag=="
      // rawData用户原始数据字符串getUserInfo(e)获取
      // signatrue使用shal得到字符串getUserInfo(e)获取 signature: "efe3fd6334f9d28547ecdc806cf0f068c55edb22"
       // 获取微信用户的基本信息
        // getUserInfo(e) {
        //   // 判断是否获取用户信息成功
        //    if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')
        //    // 获取用户信息成功， e.detail.userInfo 就是用户的基本信息
        //    console.log(e.detail.userInfo)
        //    // 将用户的基本信息存储到 vuex 中
        //    this.updateUserInfo(e.detail.userInfo)
           
        //    // 获取登录成功后的 Token 字符串
        //     this.getToken(e.detail)
        // },
       dianji(){
       			uni.login({
       			    provider: 'weixin',
       			    success:(loginRes)=> {
       			        // 登录成功
       			        uni.getUserInfo({
       			            provider: 'weixin',
       			            success:(info)=> {
       			                // 获取用户信息成功, info.authResult保存用户信息
                            console.log('获取用户信息成功',info);
                            // 将用户的基本信息存储到 vuex 中
                            // 这里用户信息拿不到我们自己写
                            this.updateUserInfo(info.userInfo)
                            
                            // 获取登录成功后的 Token 字符串
                            this.getToken(info)
                            // 登录成功后，返回登录之前的页面
                            this.navigateBack()
       			            }
       			        })
       			    },
       			    fail: function (err) {
       			        // 登录授权失败  
       			        // err.code是错误码
                    console.log('获取用户信息失败',err);
       			    }
       			});
       			},
    
       // 调用登录接口，换取永久的 token
       async getToken(info) {
         // 调用微信登录接口
         const [err, res] = await uni.login().catch(err => err)
         // 判断是否 uni.login() 调用失败
         // err || res.errMsg !== 'login:ok'先判断err能否转化为true；如果能转化为true就不执行后面的res.errMsg
         console.log('获取的code',res);
         if (err || res.errMsg !== 'login:ok') return uni.$showError('获取code失败')
         
         // 准备参数对象
         const query = {
             code: res.code,
             encryptedData: info.encryptedData,
             iv: info.iv,
             rawData: info.rawData,
             signature: info.signature
           }
        // 换取 token
        const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
          console.log('获取token',loginResult);
          // 更新 vuex 中的 token
          // 这里我们拿不到真实token；我们自己写一个
          const token='BearereyJhbGci0iJIUzI1NiIsInR5cCI6IkpXVCJ9 . eyJ1aWQi0jEyLCJpYXQi0jE1MjUQMDIyMjMsImV4cCI6MTUyNTQ40DYyM30.g-4GtEQNPwT_ _Xs0Pq7Lrco. 9DfHQQsBiOKZerk0-0-o'
           // this.updateToken(loginResult.message.token)
            console.log('c1');
           this.updateToken(token)
            console.log('c2');
          if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')
          uni.$showMsg('登录成功')
       },
       // 返回登录之前的页面
       navigateBack() {
          // redirectInfo 不为 null，并且导航方式为 switchTab
          // 判断映射过来的vuex中redirectInfo对象
          if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
             // 调用小程序提供的 uni.switchTab() API 进行页面的导航
             uni.switchTab({
                // 要导航到的页面地址
                url: this.redirectInfo.from,
                // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
                // 注意这里的complete
                // uni.switchTab接口调用结束的回调函数（调用成功、失败都会执行）
                complete: () => {
                  this.updateRedirectInfo(null)
                }
             })
            
          }
       }
    }
  }
</script>

<style lang="scss">
  
  .login-container {
    // 登录盒子的样式
    height: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    position: relative;
    // 将超出部分的椭圆隐藏
    overflow: hidden;
  
    // 绘制登录盒子底部的半椭圆造型
    &::after {
      content: ' ';
      display: block;
      position: absolute;
      width: 100%;
      height: 40px;
      left: 0;
      bottom: 0;
      background-color: white;
      border-radius: 100%;
      transform: translateY(50%);
    }
  
    // 登录按钮的样式
    .btn-login {
      width: 90%;
      border-radius: 100px;
      margin: 15px 0;
      background-color: #c00000;
    }
  
    // 按钮下方提示消息的样式
    .tips-text {
      font-size: 12px;
      color: gray;
    }
  }

</style>